<template>
	
	<Anime>
		<template #title-left>
			<h1 class="title" ><a href="">动漫</a></h1>
		</template>
		<template #title-left2>
			<ul class="title-left2-ul">
				<li v-for="(item,index) in titleList" :key="item.index" class="ul-li">
					<a href="">{{item}}&nbsp;&nbsp;|</a>
				</li>
			</ul>
		</template>
		<template #message>
			<ul class="img-ul">
                <li v-for="(item,index) in imgList" :key="item.index" class="ul-li">
                    <a href="#">
                        <img :src="item.imageUrl" alt="" class="ul-img">
                        <sapn class="ul-p">{{item.meta}}</sapn>
                        <h4 class="h4">  <a href=""> {{item.name}}</a></h4>
                        <h5 class="h5">{{item.description}}</h5>  
                    </a>
                    
                </li>
            </ul>
		</template>
	</Anime>

	<Anime>
		<template #title-left>
			<h1 class="title" ><a href="">纪录片</a></h1>
		</template>
		<template #title-left2>
			<ul class="title-left2-ul">
				<li v-for="(item,index) in titleList2" :key="item.index" class="ul-li">
					<a href="">{{item}}&nbsp;&nbsp;|</a>
				</li>
			</ul>
		</template>
		<template #message>
			<ul class="img-ul">
                <li v-for="(item,index) in imgList2" :key="item.index" class="ul-li">
                    <a href="#">
                        <img :src="item.imageUrl" alt="" class="ul-img2">
                        <sapn class="ul-p">{{item.meta}}</sapn>
                        <h4 class="h4">  <a href=""> {{item.name}}</a></h4>
                        <h5 class="h5">{{item.description}}</h5>  
                    </a>
                    
                </li>
            </ul>
		</template>
	</Anime>
	
</template>

<script>
import Anime from './components/Anime'
import axios from 'axios'
export default {
	name: 'App',
	components:{
		Anime
	},
	data() {
		return {
			titleList:['热播动画','国产动画','日本动画','动态动画','更多>',],
			titleList2:['辣子日','生门·纪实剧','中国医生','地球脉动','恐龙星球','从寝室皇到汉武帝','BBC:海洋','更多>',],
			imgList:[],
			imgList2:[]

		};
	},
	mounted() {
		const that=this;
		var url="/aabbcc/strategy/pcw/data/indexCsr2Data";
		axios.get(url)
  		.then(function (response) {
			  that.imgList=response.data.data.formatData.dongman.list.slice(0,7);
   			
  		})
  		.catch(function (error) {
    		console.log(error);
  		})

		axios.get(url)
  		.then(function (response) {
			  that.imgList2=response.data.data.formatData.jilupian.list.slice(0,7);
  		})
  		.catch(function (error) {
    		console.log(error);
  		})
	},
};
</script>

<style>
.title-left2-ul{
	float: left;
	margin-left: 10px;
	margin-top: 15px;
}
.ul-li{
		float: left;
		font-size: 15px;
		list-style: none;
		
}
.ul-img2{
    float: left;
    width:205px;
    height:300px;
    border-radius: 3%;
    
}
</style>
